@extends('layouts.default')

@section('title', '活动列表')
@push('scripts')
<script>
    var filters = {};
    var totalNUm = 0;
    var per_page = 10;
    var param = {};
    layui.use(['layer', 'element','form','table','laypage','laytpl','laydate'], function(){
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var element = layui.element;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;

        getTableList(1, per_page);
        
        //日期时间范围
        laydate.render({
            elem: '#startdate'
            ,type: 'datetime'
        });
        

        //头工具栏事件
        table.on('toolbar(tablelist)', function(obj){
            switch(obj.event){
                case 'add':
                    var index = layer.load(2);
                    layer.open({
                        type: 1, 
                        title:'新增学期',
                        content: $('#add-term'),
                        area: ['650px', '400px'],
                        btn: ['确认', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero){
                            $('#queryBtn2').click();
                        }
                        ,btn2: function(index, layero){
                            $('#add-term').hide();
                        }
                        ,cancel: function(){ 
                            $('#add-term').hide();
                        }
                    });
                    layer.close(index);
                break;
            };
        });
        //操作栏
        table.on('tool(tablelist)', function(obj) {
            var data = obj.data;
            if (obj.event == 'seeEvent'){
                layer.open({
                    type: 1, 
                    title:'编辑学期',
                    content: $('#add-term'),
                    area: ['650px', '400px'],
                    btn: ['确认', '取消'],
                    btnAlign: 'c',
                    yes: function(index, layero){
                        $('#queryBtn2').click();
                    }
                    ,btn2: function(index, layero){
                        $('#add-term').hide();
                    }
                    ,cancel: function(){ 
                        $('#add-term').hide();
                    },
                    success: function(layero, index){
                        getTermById({'id':data.id},function(res){
                            if(res.code == 1){
                                form.val("formTest", { 
                                    "id": res.data.id 
                                    ,"title": res.data.title
                                    ,"end_date": res.data.end_date
                                });
                            }                                  
                        })
                    }
                });
            }else if(obj.event == 'delEvent'){
                layer.confirm('确定删除？', function(index){                                           
                    delTerm({'id':data.id},function(res){
                        if(res.code == 1){
                            obj.del(); 
                            layer.close();
                            layer.msg('删除成功', {
                                time: 2000,
                                icon: 6
                            });                                                          
                        }else{
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                    })
                });
                
            }
        });

        //表单提交
        form.on('submit(queryBtn2)', function(data){
            setTerm(data.field,function(res){
                if(res.code == 1){
                    layer.closeAll();
                    $('#add-term').hide();
                    layer.msg('操作成功', {
                        time: 2000,
                        icon: 6
                    });                          
                    getTableList(1);
                }else{
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    });
                }
            })
            return false;
        });  
        
        // 搜索查询
        form.on('submit(queryBtn)', function(data) {
            var param = data.field;
            filters = param
            getTableList(1, per_page);
        });
        // 重置
        form.on('submit(resetBtn)', function(data) {
            filters = {};
            $('#qryForm')[0].reset();
            getTableList(1, per_page)
        });
        
        function getTableList(page, limit) {
            var para = {
                "page": page,
                "search": filters,
                "limit": limit,
            };

            getTermList(para, function(res){
                if(res.code === 1) {
                    if(totalNUm != res.total) {
                        totalNUm = res.total;
                        renderPageBar(page)
                    }

                    table.render({
                        data: res.data,
                        elem: '#tablelist',
                        //toolbar: '#toolbarHead', //开启头部工具栏，并为其绑定左侧模板
                        //defaultToolbar: [],
                        cellMinWidth: 80, 
                        limit: 10,
                        cols: [[
                            {type: 'numbers', title: '序号'},
                            {field: 'title', title: '学年', align: 'center'},
                            {field: '', title: '结束时间', align: 'center', width:'30%', templet: function (d) {
                                return d.end_date;
                            }},
                            // {field: '', title: '是否当前学期', align: 'center', templet: function (d) {
                            //     return d.is_now == 1 ? '是' :'否';
                            // }},
                            // {title: '操作', align: 'center', toolbar: '#opDemo'}
                        ]],
                        done: function(res, curr, count) {
                            setBtnPermission();
                        },
                        page: false,
                        loading: true
                    });
                } else {
                    layer.msg(res.msg, {time: 2000, icon: 5});
                }
            });
        }

        function renderPageBar(page,limit) {
            laypage.render({
                elem: 'pageBar',
                count: totalNUm, //数据总数，从服务端得到
                curr: page,
                first: '第一页',
                last: '最后一页',
                limit:limit,
                layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
                jump: function(obj, first) {
                    //首次不执行
                    if(!first) {
                        layer.closeAll();
                        getList(obj.curr,obj.limit)
                    }
                }
            });
        }
    })
</script>
@endpush
@section('content')
<style>
    
</style>

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <form id="qryForm" class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline"> 
                        <label class="layui-form-label">学年：</label>
                        <div class="layui-input-inline">
                            <input name="title" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" lay-submit lay-filter="queryBtn" class="layui-btn layui-btn-normal">查询</button>
                        <button type="button" lay-submit lay-filter="resetBtn" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<div class="layui-card">
    <script type="text/html" id="toolbarHead">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal" lay-event="add" btnPermission="300">新增学期</button>
        </div>
    </script>

    <div class="layui-card-body">
        <table class="layui-hide" id="tablelist" lay-filter="tablelist" lay-data="{id: 'tablelist'}"></table>
        <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>
    </div>

    <script type="text/html" id="opDemo">
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="seeEvent" btnPermission="301">编辑</a>
        <a class="layui-btn layui-btn-primary layui-btn-primary layui-btn-xs" lay-event="delEvent" btnPermission="302">删除</a>
    </script>
</div>


<div id="add-term" style="display:none;" >
    <form class="layui-form" style="margin-top: 50px;" lay-filter="formTest"> 
        <div class="layui-form-item">
            <label class="layui-form-label" style="text-align: center;width: 110px">学年:</label>
            <div class="layui-input-inline" style="width: 70%;">                      
                <input type="text" name="title" lay-verify="required"  placeholder="请输入" lay-reqText="学年不能为空" autocomplete="off" class="layui-input">
            </div>               
        </div> 
        
        <div class="layui-form-item" >
            <div class="layui-inline" id="test6">
                <label class="layui-form-label" style="text-align: center;width: 110px">结束日期:</label>
                <div class="layui-input-inline" >
                    <input type="text" name="end_date" required  lay-verify="required" autocomplete="off" id="startdate" class="layui-input" placeholder="开始日期">
                </div>
          
            </div>               
        </div> 

        <button type="button" id="queryBtn2" lay-submit lay-filter="queryBtn2" class="pear-btn pear-btn-md pear-btn-primary layui-hide" >提交</button>
        <input name="id" class="layui-hide" value="">
    </form>
</div>
@endsection
